<template>
	<view class="drainage_report_index">
		<!-- <view class="user-box" style="display: flex;justify-content: center;">
			<view class="" style="width: 180rpx;">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="" style="padding: 20rpx;">
			<uni-group-uform v-model="form" ref="uform" :config="config" :rules="rules" validate-trigger="bind">
				<!-- <template slot="phone">
					<view style="display: flex;align-items: center;">
						<uni-easyinput placeholder="未设置" v-model="form.phone"></uni-easyinput>
						<view class="" style="width: 80rpx;text-align: center;">
							<u-icon color="#409eff" style="font-size: 50rpx;" name="file-text-fill"></u-icon>
						</view>
						<view class="" style="width: 80rpx;text-align: center;">
							<u-icon color="#409eff" style="font-size: 50rpx;" name="phone-fill"></u-icon>
						</view>

					</view>
				</template> -->
			</uni-group-uform>
			<view class="" style="display: flex;justify-content: space-around;">
				<uni-button type="primary" @click="sub">提交</uni-button>
				<uni-button type="default" @click="formReset">重置</uni-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listWdSewagePlant
	} from "@/api/wd/wdSewagePlant";
	import {
		listWdRunLog,
		getWdRunLog,
		delWdRunLog,
		addWdRunLog,
		updateWdRunLog,
	} from "@/api/wd/wdRunLog";
	export default {
		data() {
			return {
				form: { // 建议申明属性与config数组的name保持一致

				},
				config: [{
						isGroup: true,
						name: 'sbyxql', // 关键字 默认开启插槽 使用的对应参数
						groupName: '设备运行情况',
						config: [{
								name: 'plantId',
								label: '污水厂',
								component: 'uni-data-select',
								required: true,
								extra: {
									placeholder: "请选择",
									localdata: []
								},
								init() {
									if (!this.extra) {
										this['extra'] = {
											localdata: []
										};
									}
									if (!this.extra.localdata) {
										this.extra['localdata'] = [];
									}
									listWdSewagePlant({
										pageNum: 1,
										pageSize: 999999
									}).then(res => {

										if (res.rows) {
											for (const key in res.rows) {
												this.extra.localdata.push({
													text: res.rows[key].name,
													value: res.rows[key].id
												});
											}
										}
									});
								},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							}, {
								name: 'deviceName',
								label: '设备名称',
								component: 'uni-easyinput',
								extra: {},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							}, {
								name: 'treatWater',
								label: '处理水量',
								component: 'uni-easyinput',
								extra: {},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							},
							{
								name: 'electro',
								label: '用电量',
								component: 'uni-easyinput',
								extra: {
									style: 'background-color: #fff;',
								},
								event: {
									change: (e) => { // 操作 form字段的示例 改变config
										console.log(e, 'ss1', this)
									}
								}
							},
						]
					},
					{
						isGroup: true,
						name: 'ypsyqk', // 关键字 默认开启插槽 使用的对应参数
						groupName: '药品使用情况',
						config: [{
								name: 'drugName',
								label: '药品名称',
								component: 'uni-easyinput',
								extra: {
									style: 'background-color: #fff;',
								},
								event: {
									change: (e) => { // 操作 form字段的示例 改变config
										console.log(e, 'ss1', this)
									}
								}
							}, {
								name: 'dosage',
								label: '用药量',
								component: 'uni-easyinput',
								extra: {},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							},
							{
								name: 'dosingTime',
								label: '加药时间',
								component: 'uni-datetime-picker',
								extra: {
									// style: 'background-color: #fff;',
									// localdata: []
								},
								event: {
									change: (e) => { // 操作 form字段的示例 改变config
										console.log(e, 'ss1', this)
									}
								}
							},
						]
					},
					{
						isGroup: true,
						name: 'szclqk', // 关键字 默认开启插槽 使用的对应参数
						groupName: '水质处理情况',
						config: [{
								name: 'projectName',
								label: '项目名称',
								component: 'uni-easyinput',
								extra: {
									placeholder: "",
								},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							}, {
								name: 'waterInflow',
								label: '进水量',
								component: 'uni-easyinput',
								extra: {
									placeholder: "",
								},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							},
							{
								name: 'waterYield',
								label: '出水量',
								component: 'uni-easyinput',
								extra: {
									style: 'background-color: #fff;',
									localdata: []
								},
								event: {
									change: (e) => { // 操作 form字段的示例 改变config
										console.log(e, 'ss1', this)
									}
								}
							},
						]
					}, {
						isGroup: true,
						name: 'szclqk1', // 关键字 默认开启插槽 使用的对应参数
						groupName: '合计处理水总量',
						config: [{
								name: 'totalTreatWater',
								label: '处理水量',
								component: 'uni-easyinput',
								extra: {
									placeholder: "",
								},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							}, {
								name: 'totalDosage',
								label: '加药量',
								component: 'uni-easyinput',
								extra: {
									placeholder: "",
								},
								event: {
									change: function(e) {
										console.log(e)
									},
									input: function(e) {
										console.log(e)
									}
								}
							},
							{
								name: 'totalElectro',
								label: '用电量',
								component: 'uni-easyinput',
								extra: {
									style: 'background-color: #fff;',
									localdata: []
								},
								event: {
									change: (e) => { // 操作 form字段的示例 改变config
										console.log(e, 'ss1', this)
									}
								}
							},
						]
					}

				],
				rules: {
					plantId: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
				}
			}
		},
		methods: {
			sub() {
				let form = this.$refs.uform.getForm()
				form.validate().then(res => {
					console.log('表单数据信息：', res, this.form);

					addWdRunLog(this.form).then((res) => {
							if (res.code == 200) {
								uni.showModal({
									title: '提示', // 标题
									content: '上报成功', // 提示内容
									showCancel: false,
									success(res) {
										uni.navigateBack(0)
									}
								});
							} else {
								uni.showToast({
									duration: 3000,
									icon: "error",
									title: res.msg
								});
							}
						})
						.finally(() => {});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			formReset: function(e) {
				console.log('清空数据')
				this.form = {
					deviceName:null,
					treatWater:null,
					electro:null,
					drugName:null,
					dosage:null,
					projectName:null,
					waterInflow:null,
					waterYield:null,
					totalTreatWater:null,
					totalDosage:null,
					totalElectro:null
				}
			},
			getItem(name) {
				return {
					item: this.config.find(res => res.name === name),
					index: this.config.findIndex(res => res.name === name)
				}
			},
			getItems(arr = []) {
				let obj = {}
				arr.map(res => {
					obj[res] = this.getItem(res)
				})
				return obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drainage_report_index {
		font-size: 40rpx;

		.user-box {
			display: flex;
			align-items: center;
			height: 300rpx;
			padding: 20rpx;
			width: 100%;
			color: #ffffff;
			background-image: url(/static/images/index/banner.png);
		}

	}
</style>